import React, { Suspense } from 'react';
import { useRoutes } from 'react-router-dom';
import { Box, CircularProgress } from '@mui/material';

import { routeConfig } from './index';
import { commonStyles } from '@/styles/utils';

// 页面加载骨架屏
const PageSkeleton: React.FC = () => (
  <Box
    sx={{
      ...commonStyles.flexCenter,
      minHeight: '400px',
      flexDirection: 'column',
      gap: 2,
    }}
  >
    <CircularProgress size={40} thickness={4} />
    <Box sx={{ fontSize: '0.875rem', color: 'text.secondary' }}>
      页面加载中...
    </Box>
  </Box>
);

export const AppRouter: React.FC = () => {
  const element = useRoutes(routeConfig);

  return (
    <Suspense fallback={<PageSkeleton />}>
      {element}
    </Suspense>
  );
};